<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法5:v-show和v-if</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:v-if</h1>
        <h3>v-if v-else-if v-else 它们是连续的，中间不能有标签对</h3>
        <p>例子</p>
        <h4 v-if="order==0">我是威风凛凛的第一排</h4>
        <h4 v-else-if="order==1">我是不上不下的第二排</h4>
        <h4 v-else>我是垫底的最后一排</h4>
        <button @click="order=++order%3">切换</button>
        <h1>知识点2:v-show</h1>
        <h4 v-show="visible" >v-show的展示</h4>
        <h4 v-if="visible">v-if的展示</h4>
        <button @click="visible=!visible">显示/隐藏</button>
        <h4>v-show是通过添加样式来实现隐藏的，v-if是通过删除标签对实现隐藏的
            通常情况下，我们优先选择v-show来进行隐藏或显示
        </h4>
        <h1>课堂练习</h1>
        <h3>通过单选框的单击事件来显示不同用户的身份显示不同的页面</h3>
        <input type="radio" value="管理员" v-model="users">管理员
        <input type="radio" value="教师" v-model="users">教师
        <input type="radio" value="学生" v-model="users">学生
        <button @click="show=true">登录</button>
        <div v-show="show">
            <div v-if="users=='管理员'">
                管理员,欢迎你，我们开始管理吧
            </div>
            <div v-else-if="users=='教师'">
                教师,欢迎你，我们开始授课吧
            </div>
            <div v-else>
                学生,欢迎你，我们开始上课吧
            </div>
        </div>
        <p>请选择登录类型：</p>
        <input type="radio" value="QQ登录" v-model="deng">QQ登录
        <input type="radio" value="手机登录" v-model="deng">手机登录
        <input type="radio" value="邮箱登录" v-model="deng">邮箱登录
        <div v-show="show1">
            <div v-if="deng=='QQ登录'">
                <h3>QQ登录</h3>
                QQ号：<input type="text"><br>
                密码：<input type="text">
            </div>
            <div v-else-if="deng=='手机登录'">
                <h3>手机登录</h3>
                手机号：<input type="text"><br>
                验证码：<input type="text">
            </div>
            <div v-else>
                <h3>邮箱登录</h3>
                邮箱号：<input type="text"><br>
                邮箱密码：<input type="text">
            </div>
        </div>
        <button @click="show1=true">登录</button>
    </div>
</body>
</html>
<script>
    const connApp=Vue.createApp({
        data() {
            return {
                order:0,
                visible:false,
                users:'',
                show:false,
                show1:false,
                deng:'',
            }
        },
    }).mount("#app")
</script>